<!--用cesium 渲染二维地图-->
<template>
  <div id="cesiumContainer"></div>
</template>
<script>
var viewer
export default {
  data() {
    return {
      markPointList: [
        {
          id: '29936',
          creator: null,
          createDate: null,
          cameraIndexCode: '37021308001310014344',
          name: '725 二楼扶梯北朝南',
          latitude: '36.165999',
          longitude: '120.432686',
          url: 'rtsp://192.168.151.11:554/openUrl/WKpjl3W',
          status: '1',
          updateDate: null,
          updater: null,
        },
        {
          id: '29913',
          creator: null,
          createDate: null,
          cameraIndexCode: '37021308001310013172',
          name: '702 二楼西楼梯口',
          latitude: '36.166386',
          longitude: '120.432742',
          url: 'rtsp://192.168.151.11:554/openUrl/WBnymyI',
          status: '1',
          updateDate: null,
          updater: null,
        },
        {
          id: '29915',
          creator: null,
          createDate: null,
          cameraIndexCode: '37021308001310013273',
          name: '704 二楼东朝西',
          latitude: '36.16628',
          longitude: '120.432877',
          url: 'rtsp://192.168.151.11:554/openUrl/WC8Xnhu',
          status: '1',
          updateDate: null,
          updater: null,
        },
        {
          id: '29912',
          creator: null,
          createDate: null,
          cameraIndexCode: '37021308001310013120',
          name: '701 二楼北边朝东',
          latitude: '36.166353',
          longitude: '120.432891',
          url: 'rtsp://192.168.151.11:554/openUrl/WAZqsve',
          status: '1',
          updateDate: null,
          updater: null,
        },
      ],
    }
  },
  created() {},
  mounted() {
    this.init()
  },
  // destroyed() {
  //   // 删除地图上绘制的所有的点
  //   viewer.entities.removeAll()
  // },
  methods: {
    /**
     * 获取所有点位
     */
    // getPointList() {
    //   let params = {
    //     lat: 36.166174,
    //     lng: 120.432288,
    //     distance: 1000,
    //   }
    //   this.$get('/csynvideourl/queryPoint', params).then((res) => {
    //     if (res.code !== 0) {
    //       return this.$message.error(res.msg)
    //     }
    //     let data = res.data
    //     let mapMarkerList = []
    //     // 青岛北站 坐标：120.36959094492549 36.16877217251774 42.062301883697664
    //     data.map((v, index) => {
    //       var position = Cesium.Cartesian3.fromDegrees(v.longitude, v.latitude, 42.062301883697664)
    //       viewer.entities.add({
    //         id: `markpoint${index}`,
    //         // indexCode: v.POINT_ID,
    //         position: position,
    //         billboard: {
    //           image: './icon-food.png',
    //           height: 20,
    //           width: 20,
    //           sizeInMeters: false, // 以图片像素为 标准
    //         },
    //       })
    //     })
    //   })
    // },
    /**
     * 初始化
     */
    init() {
      viewer = new Cesium.Viewer('cesiumContainer', {
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: true, // 是否显示动画控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        timeline: true, // 是否显示时间线控件
        fullscreenButton: false,
        shouldAnimate: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
        terrainProvider: Cesium.createWorldTerrain(),
        // imageryProvider: Cesium.createWorldImagery({
        //   //默认BING影像地图
        //   style: Cesium.IonWorldImageryStyle.AERIAL,
        // }),
      })
      this.$emit('cesiumLoad', viewer)
      // 去除版权信息
      viewer._cesiumWidget._creditContainer.style.display = 'none'
      //默认的Cesium会加载一个bingMap底图，这个地图网络不太好，一般要先去掉这个默认的
      viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
      //arcgis在线影像地图
      viewer.imageryLayers.addImageryProvider(
        new Cesium.ArcGisMapServerImageryProvider({
          name: 'img_arcgis',
          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
        })
      )

      this.init3DTile()
    },
    init3DTile() {
      // 加在接口 3dtiles 对象
      // var url = "http://q3d.qd.gov.cn/qcserver/rest/services/zdqy_3Dtiles/CacheServer/tileset.json?key=b9eG3RC6OX66dj46vauU3zS3";
      var url = 'http://q3d.qd.gov.cn/qcserver/rest/services/zdqy_3Dtiles/CacheServer/tileset.json?key=b9eG3RC6OX66dj46vauU3zS3'
      var tileset = new Cesium.Cesium3DTileset({
        url: url,
      })
      // 异步加载模型
      tileset.readyPromise.then(function (tileset) {
        // 添加tileset 到vierer
        viewer.scene.primitives.add(tileset)
        console.log('tileset.boundingSphere.radius', tileset.boundingSphere.radius, tileset)
        var default_HeadingPitchRange = new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius)
        // 聚焦titleset
        viewer.zoomTo(tileset, default_HeadingPitchRange)
      })
      /**
       * 创建范围 乐客城
       */
       var west = parseFloat('120.36959094492549')
      var south = parseFloat('36.16877217251774')
      var east = parseFloat('120.36959094492549')
      var north = parseFloat('36.16877217251774')

      viewer.camera.flyTo({
        //定位到范围中心点
        destination: Cesium.Cartesian3.fromDegrees(Number((west + east) / 2), Number((south + north) / 2), 2200),
        orientation: {
          heading: Cesium.Math.toRadians(180), //1
          pitch: Cesium.Math.toRadians(-90),
          roll: 0,
        },
      })
      this.markPointList.map((v, index) => {
        var position = Cesium.Cartesian3.fromDegrees(v.longitude, v.latitude, 42.062301883697664)
        viewer.entities.add({
          id: `markpoint${index}`,
          indexCode: v.cameraIndexCode,
          position: position,
          billboard: {
            image: './icon-food.png',
            height: 20,
            width: 20,
            sizeInMeters: false, // 以图片像素为 标准
          },
        })
      })
    },

    initPoint() {
      /**
       * 创建范围 乐客城
       */
      var west = parseFloat('120.432288')
      var south = parseFloat('36.166174')
      var east = parseFloat('120.432288')
      var north = parseFloat('36.166174')
      viewer.camera.flyTo({
        //定位到范围中心点
        destination: Cesium.Cartesian3.fromDegrees(Number((west + east) / 2), Number((south + north) / 2), 2200),
        orientation: {
          heading: Cesium.Math.toRadians(180), //1
          pitch: Cesium.Math.toRadians(-90),
          roll: 0,
        },
      })
      // this.getPointList()
      // this.handlePointClick() //添加点的点击事件
    },
  },
}
</script>
<style scoped lang="less">
#cesiumContainer {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
